<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
.movie-list thead th,
.movie-list tbody th .ui-table-cell-label,
.movie-list tbody td .ui-table-cell-label {
    text-transform: uppercase;
    font-size: .7em;
    color: rgba(0,0,0,0.5);
    font-weight: normal;
}
/* White bg, large blue text for rank and title */
.movie-list tbody th {
    font-size: 1.2em;
    background-color: #fff;
    color: #77bbff;
    text-align: center;
}
/*  Add a bit of extra left padding for the title */
.movie-list tbody td.title {
    padding-left: .8em;
}
/*  Custom stacked styles for mobile sizes */
/*  Use a max-width media query so we don't have to undo these styles */
@media (max-width: 40em) {
    /*  Negate the margin between sections */
    .movie-list tbody th {
        margin-top: 0;
        text-align: left;
    }
    /*  White bg, large blue text for rank and title */
    .movie-list tbody th,
    .movie-list tbody td.title {
        display: block;
        font-size: 1.2em;
        line-height: 110%;
        padding: .5em .5em;
        background-color: #fff;
        color: #77bbff;
        -moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        box-shadow: 0 1px 6px rgba(0,0,0,.1);
    }
    /*  Hide labels for rank and title */
    .movie-list tbody th .ui-table-cell-label,
    .movie-list tbody td.title .ui-table-cell-label {
        display: none;
    }
    /*  Position the title next to the rank, pad to the left */
    .movie-list tbody td.title {
        margin-top: -2.1em;
        padding-left: 2.2em;
        border-bottom: 1px solid rgba(0,0,0,.15);
    }
    /*  Make the data bold */
    .movie-list th,
    .movie-list td {
        font-weight: bold;
    }
    /* Make the label elements a percentage width */
    .movie-list td .ui-table-cell-label,
    .movie-list th .ui-table-cell-label {
        min-width: 20%;
    }
}
/* Media query to show as a standard table at wider widths */
@media ( min-width: 40em ) {
    /* Show the table header rows */
    .movie-list td,
    .movie-list th,
    .movie-list tbody th,
    .movie-list tbody td,
    .movie-list thead td,
    .movie-list thead th {
        display: table-cell;
        margin: 0;
    }
    /* Hide the labels in each cell */
    .movie-list td .ui-table-cell-label,
    .movie-list th .ui-table-cell-label {
        display: none;
    }
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this */
@media ( max-width: 40em ) {
    .movie-list td,
    .movie-list th {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        clear: left;
    }
}
</style>
</head>
<title>工资表</title>

</head>
<div data-role="page" id="payroll">
  <div data-role="header" data-theme="">
    <h1>工资表</h1>
  </div>

  <div data-role="content" data-theme="">
<!--   	<table> -->
<!--   		<tr> -->
<!--   	<td><input type="button" value="搜索" data-icon="search" ></td> -->
<!--   	<td><input type="text" ></td>	 -->
<!--      </tr> -->
<!--      </table> -->

     <table data-role="table" id="movie-table-custom" data-mode="reflow" class="movie-list table-stroke">
  <thead>
    <tr>
      <th style="width:40%">日期</th>
      <th data-priority="1">件数</th>
      <th data-priority="2"><abbr title="Rotten Tomato Rating">工资</abbr></th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="title"><a  data-rel="external">20141106</a></td>
      <td>1</td>
      <td>100</td>
 
    </tr>
    <tr>
      <td class="title"><a data-rel="external">20141105</a></td>
      <td>1</td>
      <td>100</td>
 
    </tr>
   
  </tbody>
</table>
  </div>

  <div data-role="footer" data-theme="">
  </div>
</div> 

</body>
</html>